<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 15:27:51
 * @LastEditors: yuxi
 * @LastEditTime: 2022-10-09 21:35:17
-->
<script>
import TileLayer from './TileLayer.vue'
import Tile from 'ol/layer/Tile'
import TileWMS from 'ol/source/TileWMS'

export default {
  name: 'MiningWMSLayer',
  mixins: [TileLayer],
  render() {
    return ''
  },
  props: {
    url: {
      type: String,
      default() {
        return ''
      },
    },
    layerId: {
      type: String,
      default() {
        return ''
      },
    },
  },
  computed: {
    _url() {
      return this.url
    },
  },
  data() {
    return {
      layer: null,
      source: null,
    }
  },
  methods: {
    load() {
      const { map } = this 
      console.log(`WMSLayer load url: ${this.url}, layerId: ${this.layerId} `)
      this.source = new TileWMS({
        url: this.url,
        params: {
          LAYERS: this.layerId,
          TILED: true,
        },
        serverType: 'geoserver',
      })

      this.layer = new Tile({
        source: this.source,
        properties: {
          layerName: this.layerName,
          addLayerControl: this.addLayerControl 
        }
      })

      map.addLayer(this.layer)
      // this.$emit('ready', { map: this.map, layer: this.layer })
    },
  },
}
</script>

<style></style>
